<template>
  <div v-loading="loading" class="table-container">
    <el-table
      v-if="clientOrder.items.length > 0"
      :data="clientOrder.items"
      :row-class-name="(data) => tableRowClassName(data)"
      class="fb-table settle-table-info-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column
        align="center"
        width="50">
        <template slot="header" slot-scope="scope">
          <!--这个 slot-scope="scope" 属性，虽然会报警告，但是不能去掉，去掉会让这个头部显示不出 -->
          <el-checkbox v-model="allChecked" @change="selectAll"><span/></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row._check" @change="selectSingle(scope.row,$event)"><span/></el-checkbox>
        </template>
      </el-table-column>

      <el-table-column align="left" label="订单类型" width="80">
        <template slot-scope="scope">
          <div :style="{background: orderTypeFilter(scope.row.orderType).bg || 'rgb(253, 239, 233)', color: orderTypeFilter(scope.row.orderType).color || 'rgb(253, 133, 70)'}" class="order-type">
            {{ scope.row.orderType | orderTypeStatusFilter }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="订单编号" width="190">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.orderId" is-can-click @handelClick="goDetail(scope.row.id)" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单日期" width="130">
        <template slot-scope="scope">
          <div v-if="scope.row.orderTime">
            {{ scope.row.orderTime| format('YYYY/MM/DD') }}
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="到账日期" width="130">
        <template slot-scope="scope">
          <div v-if="scope.row.accountTime">
            {{ scope.row.accountTime | format('YYYY/MM/DD') }}
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="right" label="刊例价(元)" min-width="100">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.articlesPrice" :price="scope.row.articlesPrice / 100" />
        </template>
      </el-table-column>
      <el-table-column align="right" label="折扣(元)" min-width="100">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.discountPrice" :price="scope.row.discountPrice" />
        </template>
      </el-table-column>
      <el-table-column align="right" label="含税金额(元)" min-width="110">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.taxAmount" :price="scope.row.taxAmount / 100" />
        </template>
      </el-table-column>
      <el-table-column align="right" label="已核销金额(元)" min-width="120">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.completeWriteOffAmount" :price="scope.row.completeWriteOffAmount / 100" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="逾期天数" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.overdueDayNum" style="color:#FF504F;">{{ scope.row.overdueDayNum || '0' }}</span>
          <span v-else style="color:#FF504F;">0</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="订单状态" min-width="100">
        <template slot-scope="scope">
          <div class="flex">
            <div v-if="scope.row.orderStatus || scope.row.orderStatus === 0" :style="{background: getOrderStatusColor(scope.row.orderStatus)}" class="dot" />
            <span v-if="scope.row.orderStatus || scope.row.orderStatus === 0" >{{ scope.row.orderStatus | orderStatusFilter }}</span>
            <span v-else>--</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="账号" min-width="100">
        <template slot-scope="scope">
          <!-- <resource-info
            v-if="scope.row.orderType !== 6"
            :resource-name="scope.row.resourceName"
            :account-name-organization="scope.row.accountNameOrganization"
            :account-name-platform="scope.row.accountNamePlatform"
            :resource-id="scope.row.orderInfo.resourceCode"
            account-belong-name="none"
          /> -->
          <div v-if="scope.row.orderType !== 6">
            <ToolTip :content="scope.row.resourceName"/>
          </div>
          <span v-else>包含多个账号</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单平台" min-width="130">
        <template slot-scope="scope">
          <div class="flex-center">
            <platformIcon :data="scope.row.orderPlatform" />
            <ToolTip :content="scope.row.orderPlatform" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="品牌名称" min-width="100">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.theme && scope.row.theme.length > 5" :content="scope.row.theme"/>
          <div v-else class="ellipsisOne">{{ scope.row.theme || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="文案内容" min-width="100">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.content"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单链接" min-width="100">
        <template slot-scope="scope">
          <a v-if="isLink(scope.row.orderLink)" :href="scope.row.orderLink" style="color: #406EFF;display:flex;align-items:center;cursor: pointer;" target="_blank"><i class="el-icon-link" />链接</a>
          <div v-else>{{ scope.row.orderLink || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="客户名称" min-width="100">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.clientName"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="联系人" min-width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.contactPerson"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="销售" min-width="100">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.market"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="核销状态" min-width="100">
        <template slot-scope="scope">
          <StatusText :color="['#999', '#31cc9c', '#406eff','#FF504F'][scope.row.accountState]" :text="scope.row.accountState | setAccountState" />
        </template>
      </el-table-column>
    </el-table>
    <empty-placeholder
      v-else
      :text="onlyShowSelect?'暂未选中订单':
      `<div style='text-align:center;font-weight: bold;color: #333;'>暂无符合结算条件订单</div>
      <div>订单结算条件:未结算过且订单状态≥待审批</div>
    `"
      class="empty-palceholder"
      danger-html-render
      style="position: relative;top:0px;margin-top: 60px;" />

  </div>
</template>
<script>
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
// img
import originalOrder from '@/assets/originalOrder.png';
import adjustOrder from '@/assets/adjustOrder.png';
import hedgingOrder from '@/assets/hedgingOrder.png';
import retorOrder from '@/assets/retorOrder.png';
import splitOrder from '@/assets/splitOrder.png';
import newOrder from '@/assets/newOrder.png';

import { orderTypeStatusFilter, setAccountState, getOrderStatusColor } from '@/filters/status';
import { format } from '@/filters/date';
import { moneyFilter } from '@/filters/number';
import ResourceInfo from '@/components/ResourceInfo';
import platformIcon from '@/components/Common/platformIcon';
export default {
  filters: { moneyFilter, orderTypeStatusFilter, format, setAccountState,
    orderStatusFilter(status) {
      const arr = ['草稿中', '待发布', '待核算', '待审批', '待封账', '封账中', '已封账', '已完成'];
      return arr[Number(status)];
    }
  },
  components: { ResourceInfo, platformIcon, EmptyPlaceholder },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    onlyShowSelect: {
      type: Boolean,
      default: false
    },
    clientOrder: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      allChecked: false
    };
  },
  methods: {
    getOrderStatusColor,
    // 父组件使用，翻页时判断是否全选
    checkAllOrder() {
      if (this.clientOrder.items.length > 0) {
        this.allChecked = this.clientOrder.items.every(i => i._check);
      } else {
        this.allChecked = false;
      }
    },
    selectAll(e) {
      this.allChecked = e;
      this.clientOrder.items.forEach(i => {
        this.$set(i, '_check', e);
      });
      this.$emit('handleSelectionChange', { order: this.clientOrder.items, select: e });
    },
    selectSingle(item, e) {
      this.allChecked = this.clientOrder.items.every(i => i._check);
      this.$emit('handleSelectionChange', { order: [item], select: e });
    },
    orderTypeFilter(type) {
      const arr = [
        { type: 0, img: originalOrder, bg: '#FDEFE9', color: '#FD8546' },
        { type: 1, img: splitOrder, bg: '#D9F9EF', color: '#31CC9C' },
        { type: 2, img: hedgingOrder, bg: '#FFEAF4', color: '#FF6573' },
        { type: 3, img: newOrder, bg: '#F9ECFF', color: '#9B5BED' },
        { type: 4, img: retorOrder, bg: '#FFF2DF', color: '#F99B2D' },
        { type: 5, img: adjustOrder, bg: '#EEF1FE', color: '#406EFF' },
        { type: 6, img: originalOrder, bg: '#FDEFE9', color: '#FD8546' }
      ];
      return arr[type] || {};
    },
    isLink(data) {
      const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)([A-Za-z0-9-~]+)/;
      if (reg.test(data)) {
        return true;
      }
      return false;
    },
    goDetail(id) {
      // this.$emit('closeDialog', false);
      // this.$router.push({
      //   name: 'orderDetail',
      //   params: { orderId: id }
      // });
      const routeUrl = this.$router.resolve({
        name: 'orderDetail',
        params: { orderId: id }
      });
      window.open(routeUrl.href, '_blank');
    },
    tableRowClassName({ row, rowIndex }) {
      return row._check ? `table-selected` : '';
    }
  }
};
</script>

<style lang="scss" scoped>
.settle-table-info-table {
  &::v-deep {
     .el-table__body-wrapper::-webkit-scrollbar {
      height: 8px; // 纵向滚动条 必写
    }
  }
}
.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  .order-type {
    width:56px;
    height:20px;
    font-size: 12px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 5px;
}
.table-container {
  ::v-deep {
    .empty-text {
      margin-top: 12px !important;
    }
  }
}
</style>
